<!--
 * @Author: jiu yin
 * @Date: 2024-04-11 14:04:23
 * @LastEditTime: 2024-04-23 10:09:21
 * @LastEditors: jiu yin zhen jing
 * @FilePath: \web-smart-tour\src\pagesA\ar_navigation\components\info.vue
 * jiu
-->
<template>
   <view class="content p-26rpx pl-32rpx pr-32rpx text-size-24rpx text-center flex justify-between relative z-999"
      :class="[theme == 'dark' ? 'dark' : 'light']">
      <view>
         <view class="title">{{ Weather.city.data }}</view>
         <view class="info_content mt-8rpx font-700">{{ Weather.temperature.data }}℃</view>
      </view>
      <view>
         <view>海拔</view>
         <view class="mt-8rpx font-700">{{ change_map.altitude }}m</view>
      </view>
      <view>
         <view>用时</view>
         <view class="mt-8rpx font-700">0min</view>
      </view>
      <view>
         <view>行走</view>
         <view class="mt-8rpx font-700">{{ change_map.init_distance }}m</view>
      </view>
      <view>
         <view>平均</view>
         <view class="mt-8rpx font-700">{{ change_map.speed }}m/s</view>
      </view>
   </view>
</template>

<script>
import { navigateTo, navigateBack } from "@/hooks"

export default {
   props: ["theme"],
   data() {
      return {
         navigateTo,
         Weather: {
            city: { data: " " },
            temperature: { data: " " },
         },
      }
   },
   onLoad(options) {

   },
   computed: {
      amapPlugin() {
         return this.$store.getters.amapPlugin
      },
      change_map() {
         return this.$store.getters.change_map
      },

   },
   mounted() {
      this.getWeather()
   },
   methods: {
      getWeather() {
         let _this = this
         this.amapPlugin.getWeather({
            success: function (data) {
               _this.Weather = data
            },
            fail: function (info) {
               console.log(info)
            }
         })
      }
   }
}
</script>


<style lang="scss" scoped>
.dark {
   background-color: none;
   color: #fff;
}

.light {
   background-color: #fff;

   .title {
      color: #666666;
   }

   .info_content {
      color: #3D3D3D;
   }
}
</style>
